var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    lc = document.createElement('canvas'), //离屏canvas
    lctx = lc.getContext('2d'),
    img = document.getElementById('curImg'),
    select = document.getElementById('operation'),
    start = { x: 0, y: 0 },
    isScale = false,
    imageData,
    operation = 'Opacity'; // Enlarge:放大  Default:绘制橡皮筋 Opacity:透明度
    mouse = { x: 0, y: 0, isDown: false, isClick: true };

img.onload = handleImgLoaded;
function handleImgLoaded (e) {
    c.width = this.width;
    c.height = this.height;
    lc.width = c.width;
    lc.height = c.height;
    ctx.drawImage(this, 0, 0);
    //绑定操作事件
    document.addEventListener('click', handleDocClick, false);
    c.addEventListener('mousedown', handleMousedown, false);
    c.addEventListener('mousemove', handleMousemove, false);
    c.addEventListener('mouseup', handleMouseup, false);
    select.addEventListener('change', handleSelectChange, false);
}

//处理select控件change事件
function handleSelectChange(e) {
    e = e || window.event;
    operation = this.value;
}

//处理按键事件
function handleDocClick(e) {
    e = e || window.event;
    if(e.target !== c) {
        drawBackground();
        isScale = false;
    }
}

//处理鼠标按下事件
function handleMousedown(e) {
    if(isScale) return;
    e = e || window.event;
    start.x = e.offsetX;
    start.y = e.offsetY;
    mouse.isDown = true; 
    // imageData = ctx.getImageData(0, 0, c.width, c.height); //必须执行在服务器环境上
}

//处理鼠标移动事件
function handleMousemove(e) {
    if(isScale) return;
    e = e || window.event;
    mouse.x = e.offsetX;
    mouse.y = e.offsetY;
    if(mouse.isDown) {
        drawElastic(start, mouse);
    }
}

//处理鼠标抬起事件
function handleMouseup(e) {
    if(isScale) return;
    e = e || window.event;
    mouse.isDown = false;
    switch(operation) {
        case 'Enlarge': drawEnlarge(); break;
        case 'Opacity': drawOpacity(); break;
        default: drawFinalElastic(); break;
    }
    isScale = true;
}

//绘制原始背景
function drawBackground() {
    ctx.save();
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

//绘制放大指定范围后的图案
function drawEnlarge() {
    ctx.save();
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(lc, 0, 0);
    ctx.restore();
}

//绘制透明图案
function drawOpacity() {
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    ctx.drawImage(lc, 0, 0);
    ctx.restore();
}

//默认绘制橡皮筋
function drawFinalElastic() {
    ctx.save();
    ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.rect(start.x, start.y, mouse.x - start.x, mouse.y - start.y);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}

//奖橡皮筋内部图案绘制到离屏canvas中
function drawImageTolc() {
    lctx.save();
    lctx.clearRect(0, 0, lc.width, lc.height);
    var rateXW = Math.abs(c.width / (mouse.x - start.x));
    var rateYH = Math.abs(c.height / (mouse.y - start.y));
    var rateXY = Math.abs((mouse.x - start.x) / (mouse.y - start.y));
    if(rateXW > rateYH) {
        var newWidth = lc.height * rateXY;
        lctx.drawImage(img, start.x, start.y, mouse.x - start.x, mouse.y - start.y, lc.width / 2 - newWidth / 2, 0, newWidth, lc.height);
    } else if (rateXW < rateYH) {
        var newHeight = lc.width / rateXY;
        lctx.drawImage(img, start.x, start.y, mouse.x - start.x, mouse.y - start.y, 0, lc.height / 2 - newHeight / 2, lc.width, newHeight);
    } else {
        lctx.drawImage(img, start.x, start.y, mouse.x - start.x, mouse.y - start.y, 0, 0, lc.width, lc.height);
    }
    lctx.restore();
}

//绘制带有透明度的图像到离屏canvas中
function drawOpacityImageTolc() {
    lctx.save();
    lctx.clearRect(0, 0, lc.width, lc.height);
    lctx.globalAlpha = .5;
    lctx.drawImage(img, start.x, start.y, mouse.x - start.x, mouse.y - start.y, start.x, start.y, mouse.x - start.x, mouse.y - start.y);
    // lctx.putImageData(imageData, start.x, start.y, start.x, start.y, mouse.x - start.x, mouse.y - start.y);
    lctx.restore();
}

/**
 * 绘制橡皮筋
 * @param {Obejct} start 开始点
 * @param {Object} mouse 终止点 
 */
function drawElastic(start, mouse) {
    drawBackground();
    ctx.save();
    ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.rect(start.x, start.y, mouse.x - start.x, mouse.y - start.y);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
    switch(operation) {  
        case 'Enlarge': drawImageTolc(); break;
        case 'Opacity': drawOpacityImageTolc(); break;
        default: break;
    }


}